<template>
	<view class="allView">
		<scroll-view scroll-y class="scrolly">
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
			<view class="text1">测试竖着滚动</view>
		</scroll-view>
		<view class="kongge"></view>
		
		<scroll-view scroll-x="true" class="scrollX">
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
			<view class="text2">测试横向滚动</view>
	
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.allView {
		background-color: aqua;
		width: 100%;
		height: 100vh;
	}
	.scrolly {
		width: 80%;
		height: 300px;
		background-color: green;
	}
	.text1 {
		margin-top: 10px;
		background-color: red;
	}
	.kongge {
		background-color: cadetblue;
		height: 200rpx;
	}
	.scrollX {
		width: 100%;
		height: 200px;
		white-space: nowrap;
	}
	.text2 {
		width: 90%;
		height: 200px;
		margin: 10px;
		background-color: deeppink;
		display: inline-block;
	}

</style>
